<template>
  <div>

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
        <item :item="menuList"></item>
    </el-menu>
      
    <!-- <item :item="item" v-for="(item,index) in menuList" :key="index"></item>  -->

      <!-- <ul>
          <li v-for="(item,index) in menuList" :key="index">
              {{item.name}}
              <ul>
                  <li v-for="(m,j) in item.children" :key="j">
                      &nbsp; &nbsp;{{m.name}}
                     <ul>
                         <li v-for="(n,t) in m.children" :key="t">&nbsp; &nbsp;&nbsp; &nbsp;{{n.name}}</li>
                    </ul>      
                </li>
              </ul>
        </li>
      </ul> -->
  </div>
</template>

<script>
import Item from "../components/Item.vue"
export default {
  name: "",
  data() {
    return {
      menuList: [
        {
          name: "IT互联网",
          type : 1,
          children: [
            {
              name: "编程语言",
              type : 1,
              children: [
                {
                  name: "java",
                  type : 1,
                  children: [
                    {
                      name: "jsp",
                      type : 1,
                      children: [
                          { name: "123",type : 2, }, 
                          { name: "456", type : 2 }
                        ],
                    },
                  ],
                },
                {
                  name: "python",
                },
                {
                  name: "web",
                },
                {
                  name: "php",
                },
              ],
            },
            {
              name: "前端开发",
              type : 2,
            },
            {
              name: "移动开发",
              type : 1,
              children: [
                {
                  type : 2,
                  name: "html5",
                },
                {
                     type : 2,
                  name: "andro",
                },
                {
                     type : 2,
                  name: "ios",
                },
              ],
            },
            {
              name: "游戏开发",
              type : 2
            },
          ],
        },
        {
          name: "设计创作",
          type : 1,
          children: [
            {
                type : 2,
              name: "平面设计",
            },
            {
                 type : 2,
              name: "UI设计",
            },
            {
                 type : 2,
              name: "软件设计",
            },
          ],
        },
        {
          name: "升学考研",
          type : 1,
          children: [
            {
                 type : 2,
              name: "考验",
            },
            {
                 type : 2,
              name: "大学",
            },
            {
                 type : 2,
              name: "高中",
            },
            {
                 type : 2,
              name: "初中",
            },
          ],
        },
        {
          name: "职企考证",
          type : 1,
          children: [
            {
                 type : 2,
              name: "公务员",
            },
          ],
        },
      ],
    };
  },
  components: {Item},

  /**
   * 
   * 
   *  1. 什么是递归?
   * 
   *  2. 使用递归要注意的地方?
   * 
   *  3. 案例: 步数-1 , 1 - 100的和
   * 
   *  4. 通过原生js渲染一级数据
   * 
   *  5. 通过原生js渲染了二级数据
   * 
   *  6. 通过原生js渲染了三、四、五级数据
   * 
   *  7. 通过原生js递归去动态渲染所有层级数据
   *  
   *  8. 通过vue递归组件去实现所有层级数据的渲染
   * 
   *  9. 通过element-ui实现菜单数据的渲染
   * 
   * 10. 如何将一维数据处理成tree结构
   *  
   * 
   * 菜单的动态渲染:
   * 
   *  1. 封装获取菜单接口
   * 
   *  2. 在主页调用获取菜单接口,获取到菜单的数据
   * 
   *  3. 将动态菜单的数据存储大奥vuex和本地
   * 
   *  4. 将动态菜单的数据赋值给data里面定义的menuList
   * 
   *  5. 创建递归组件tree-menu
   * 
   *  6. 将动态菜单的数据传递给递归组件
   * 
   *  7. 递归组件接受传递过来的动态菜单数据
   * 
   *  8. 进行遍历以及动态渲染
   *  
  */
};
</script>

<style scoped>
   .el-menu-vertical-demo{
       width : 220px;
   }
</style>
